<!DOCTYPE HTML>
<html  ng-app>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="/js/angular.js" type="text/javascript" ></script>
<script src="/js/controllers.js" type="text/javascript" ></script>
<script src="/js/jquery-1.4.4.min.js" type="text/javascript" ></script>
<link href="/css/manage.css" media="screen" rel="stylesheet" type="text/css" />
<br><br><br><br>
JFinal+angularjs Example
</head>
<body>
<div>
<br><br>
For it is very difficult to find an example for JFINAL+angularjs, I have to do it by myself. 
I hope that it can be a contribution for JFinal. Database is Mysql, 
and Jfinal is used on server side with renderJson() method to send Json data to browser page(item.html).
In item.html, angularjs get Json data to provide datasource for a list and a grid.
The third and forth columns are editable, and the data in the list will snyc to the change in grid.<br>
我在群里和网上找JFINAL+angularjs的例子找不到，最后只好自己写了一个。也算是给JFINAL做贡献吧。
数据库用mysql,服务器端我在item.java类中用	renderJson()方法将JSON数据送到了item.html中。
在item.html中用angularjs接收Json，生成了一个grid和一个list。
grid中的第三 列和第四列的数据是可以更改的。同时第三列数据和list中的数据会变化。
My mail and qq:         heyuheng888@163.com/1910984708<br><br>json数据格式如下：Json data are as follow：<br>{"items":
[{"id":1,"des":"item for hyh","title":"A001"},
{"id":2,"des":"item for dl","title":"A002"},
{"id":3,"des":"item for Agl","title":"A003"},
{"id":5,"des":"item for sbd","title":"A004"}]
}
</div>
<br><a href="/item/delete/{{item.id}}">Del</a><br>

<div  ng-controller="ShoppingController0">
<br><br>
Two examples：
<br>The first example is a list.
<br>
<ul>
    <li ng-repeat="item in items">
        {{item.id}}
      {{item.title}}
    {{item.des}}<p></p>
    </li>
  </ul>
  <br><br>
 The second example is grid，The third and forth columns are editable, the fifth column is the combination of the third and forth.
 The first column is generated by $index, the second column is key of the table. 
 The "delete" button only deletes the data in current page instead of data in database. Press "Return" key, you can find that new rows are generated.
   <br> 第三、四列可编辑，第五列将第三四列合并在一起.第一列是用$index生成的序列号，第二列是关键字。删除按键只是对页面有效，没有删除数据库中数据。回车键可以自动增加新行。
  <br><br>
	<table class="list" width =100% onkeydown="if (window.event.keyCode==13){ window.event.keyCode=9;}">
		<tbody>
			<tr>
				<th width="36">SN</th>
				<th>id</th>
				<th width="80">ItemCode</th>
				<th>Description</th>
				<th  width="180">ItemCode+Description</th>
				<th>Operation</th>
			</tr>
			
			<tr ng-repeat="item in items">
				<td>{{$index + 1}}</td>
				<td>{{item.id}}</td>
				<td><input type="text" ng-model="item.title" style="width:90%;" ng-blur="judLast($index,$last)" /></td>
				<td><input type="text" ng-model="item.des"  style="width:98%;" /></td>
				<td>{{item.title+"-"+ item.des}}</td>
				<td>
				<button type="button"  ng-click="delRecord($index,item.id)">Delete</button>
					
				</td>
			</tr>
		</tbody>
	</table>
</div>
</body>
</html>